<template xmlns="http://www.w3.org/1999/html">
  <div>
    <div v-for="(item,index) in constraint">
      <span class="float-left">{{ type }}</span>

      <if-express :param="item" class="float-left"></if-express>

      <!--第二条-->
      <el-select v-if="item.type" v-model="item.type" :clearable=true filterable placeholder="逻辑运算符">
        <el-option v-for="t in logicOperatorList" :label="t.name+' '+t.value" :value="t.value" :key="t.value"/>
      </el-select>

      <el-button type="warning" @click="addConstraintItem(item)">嵌入条件</el-button>

      <constraint-part v-if="item.fields && item.fields.length" :constraint="item.fields"></constraint-part>
    </div>
  </div>
</template>

<script>

import IfExpress from "./express/ifExpress.vue";

export default {
  name: 'constraintPart',
  components: {IfExpress},
  props: ["constraint", "type"],
  data() {
    if (!!this.constraint && this.constraint.length === 0) {
      debugger
      this.$set(this.constraint, 0, {left: {}, right: {}, fields: []})
    }
    return {
      logicOperatorList: [
        {name: "逻辑与", value: "&&"},
        {name: "逻辑或", value: "||"}]
    }
  },
  methods: {
    addConstraintItem() {
      const len = this.constraint.length
      this.$set(this.constraint, len, {type: "&&", left: {}, right: {}})
    }
  }
}
</script>

<style>
.float-left {
  float: left;
  margin-right: 20px;
}

.ele-left {
  width: 300px;
  text-align: left
}
</style>
